<template>
    <div class="browser-header">
        <a-button-group type="text">
            <a-tooltip content="返回">
                <a-button :disabled="!back" @click="pre">
                    <template #icon>
                        <icon-left />
                    </template>
                </a-button>
            </a-tooltip>
            <a-tooltip content="返回上一级">
                <a-button :disabled="!up" @click="toUp">
                    <template #icon>
                        <icon-arrow-up />
                    </template>
                </a-button>
            </a-tooltip>
            <a-tooltip content="刷新">
                <a-button @click="refresh">
                    <template #icon>
                        <icon-refresh />
                    </template>
                </a-button>
            </a-tooltip>
            <a-tooltip content="返回根目录">
                <a-button @click="home" :disabled="pathSplit.length == 0">
                    <template #icon>
                        <icon-home />
                    </template>
                </a-button>
            </a-tooltip>
        </a-button-group>
        <a-button-group type="text" class="browser-path" :style="{ width: (window.width - 96 - 96 - 7) + 'px' }">
            <a-link @click="home">{{ storage.name }}</a-link>
            <span v-for="item of pathSplit">
                <span>/</span>
                <a-link @click="to(item.value)">{{ item.key }}</a-link>
            </span>
        </a-button-group>
        <a-tooltip content="返回首页">
            <a-button type="text" @click="$router.push('/')" style="margin-left: 7px;">
                <template #icon><icon-reply /></template>
            </a-button>
        </a-tooltip>
        <a-tooltip content="下载管理器">
            <a-button type="text" @click="openTaskPanel">
                <template #icon><icon-download /></template>
            </a-button>
        </a-tooltip>
    </div>
</template>
<script lang="ts">
import { useTaskStore } from "@/module/task/store/TaskStore";
import { useBrowserStore } from "../store/BrowserStore";
import { useWindowSize } from "@vueuse/core";
import { mapState } from "pinia";
import { defineComponent } from "vue";

export default defineComponent({
    name: 'browser-header',
    data: () => ({
        window: useWindowSize()
    }),
    computed: {
        ...mapState(useBrowserStore, ['storage', 'back', 'up', 'pathSplit'])
    },
    methods: {
        to(path: string) {
            useBrowserStore().to(path);
        },
        pre() {
            useBrowserStore().pre();
        },
        home() {
            useBrowserStore().home();
        },
        toUp() {
            useBrowserStore().toUp();
        },
        openTaskPanel() {
            useTaskStore().openTaskPanel();
        },
        refresh(){
            useBrowserStore().render()
        }
    }
});
</script>
<style lang="less">
.browser-header {
    position: absolute;
    top: 7px;
    left: 7px;
    right: 7px;
    display: flex;
    height: 32px;

    .browser-path {
        line-height: 32px;
        margin-left: 7px;
        border: 1px solid var(--color-neutral-3);
        padding: 0 7px;
        overflow-x: auto;
        overflow-y: hidden;
    }
}
</style>